<script setup>

import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import {onMounted, reactive, ref} from "vue";
import {hasNull, isNotNull} from "../../../util/index.js";
import {getResponseData} from "../../../request/index.js";
import {deleteApi, deleteBatchApi, excelApi, pageApi} from "../../../api/axios.js";
import MyTable from "../../../components/MyTable.vue";
import {ElMessage} from "element-plus";


// 表格数据 + 分页数据 + 房间名称
let records = ref();
let pageInfo = reactive({pageNum: 1, pageSize: 10, total: 0, callback: page});
let roomTitle = ref();

// 路径导航
const navItems = [
  {icon: 'List', label: '资源管理'},
  {icon: 'OfficeBuilding', label: '房间列表'},
];

// 数据头
const headItems = [
  {type: 'ipt', span: 5, placeholder: '房间名称', callback: pageByTitle},
];


// 表格列
const columns = [
  {label: '房间名称', prop: 'title'},
  {label: '房间容量', prop: 'capacity', type: 'tag', suffix: ' 人'},
  {label: '房间地址', prop: 'address', type: 'card', tooltip: false},
  {label: '房间描述', prop: 'info', type: 'card', tooltip: false},
];

/* =================================== 搜索房间名 ===================================== */

function pageByTitle(val) {
  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (val || roomTitle.value) {
    roomTitle.value = val;
    page();
  }
}

async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {
  let config = {
    api: pageApi,
    args: {module: 'room'},
    params: {pageNum, pageSize},
    records: records,
    pageInfo: pageInfo
  }

  // 若房间名不为空，则使用房间名作为分页条件
  if (roomTitle.value) {
    config['params']['title'] = roomTitle.value;
  }

  // 发送分页请求
  await myPage(config);
}

async function myPage(config) {
  // 必传参数
  const api = config['api'];
  const records = config['records'];
  const pageInfo = config['pageInfo'];
  const params = config['params'];
  // 空值保护
  if (hasNull(api, params, records, pageInfo)) return;
  // 可选参数
  const args = config['args'];
  // 发送请求
  let res = isNotNull(args) ? await api(params, args) : await api (params);
  let data = getResponseData(res);
  if (isNotNull(data)) {
    records.value = data['list'] || data['records'];
    pageInfo['pageNum'] = data['pageNum'] || data['pageNumber'];
    pageInfo['pageSize'] = data['pageSize'] || data['size'];
    pageInfo['total'] = data['total'] || data['totalRow'];
  }
}

/* =================================== 删除成功回调 ===================================== */

function deleteSuccess() {
  ElMessage.success('删除成功');
  page();
}

/* =================================== 报表打印 ===================================== */

function downloadExcel() {
  excelApi('/room/excel', '房间报表');
}

/* =================================== 加载函数 ===================================== */

onMounted(() => page());
</script>

<template>
  <my-nav :items="navItems"/>
  <my-head :items="headItems"/>
  <my-table module="room"
            insert-page="/RoomInsert"
            update-page="/RoomUpdate"
            :records="records"
            :columns="columns"
            :delete-api="deleteApi"
            :delete-batch-api="deleteBatchApi"
            :delete-callback="deleteSuccess"
            :excel-api="downloadExcel"
            :page-info="pageInfo"/>

</template>

<style scoped lang="scss">

</style>